<script setup lang="ts">
import CdlTable from "@/components/table/index"
import type {TableTree} from "@/interfaces/components/Table"
import {reactive} from "vue";
import {useTablePagingTemplate} from "@/hooks/TableHooks";
import type {Vehicle} from "@/interfaces/views/vehicle/vehicle";
import type {Query, State} from "@/interfaces/components/Page";
import CdlSearch from "@/components/search";
import type {FormTree} from "@/interfaces/components/Form";
import {useRouter} from "vue-router";

const router = useRouter()
const request = {
  createdIsNeed: true,
  url: "/slag-truck/vehicle",
}
const state = reactive<State<Query<Vehicle>, Vehicle>>({
  queryForm: {},
  dataList: []
})
const tree: TableTree<Vehicle> = {
  colRule: [
    {ti: "车牌号", prop: "licensePlate"},
    {ti: "关联司机", prop: "driverName"},
    {ti: "司机手机号", prop: "driverMobile"},
    {ti: "车架号", prop: "vin"},
    {ti: "参考油耗(L/100Km)", prop: "fuelConsumption", sort: true},
    {ti: "车型", prop: "type"},
    {ti: "核定载重（吨）", prop: "ratifiedLoad", style: "min-width: 140px;"},
    {ti: "车辆所有人", prop: "owner"},
    {ti: "备注", prop: "remark"}
  ],
  control:[
    {name: "详情", type: "info", prop: "id", method: jumpVehicleDetail, auth: "vehicle:vehicle:info"},
    {name: "单车统计", type: "info", method: () => {}, auth: "vehicle:vehicle:statistics"},
    {name: "修改", type: "success", prop: "id", method: jumpVehicleUpdate, auth: "vehicle:vehicle:update"},
  ]
}
const searTree: FormTree<Vehicle> = [
    [
      {label: "车牌号", component: "input", prop: "licensePlate"},
      {label: "关联司机", component: "input", prop: "driverName"},
    ]
]

/**
 * 跳转车辆新增
 */
function jumpVehicleInsert(){
  router.push({
    path: "/vehicleManage/vList/createAndModifyVehicle"
  })
}

/**
 * 跳转车辆修改
 * @param id
 */
function jumpVehicleUpdate(id: string | number){
  router.push({
    path: "/vehicleManage/vList/createAndModifyVehicle",
    query: {
      id: id
    }
  })
}

/**
 * 跳转车辆详情
 * @param id
 */
function jumpVehicleDetail(id: string | number){
  router.push({
    path: "/vehicleManage/vList/vehicleDetails",
    query: {
      id: id
    }
  })
}
const {query, loading} = useTablePagingTemplate(request, state)
</script>

<template>
  <el-card>
    <CdlSearch :model="state.queryForm" :template-tree="searTree">
      <template #menu>
        <el-button type="warning" v-auth="'vehicle:vehicle:export'">导出</el-button>
        <el-button type="primary" @click="jumpVehicleInsert" v-auth="'vehicle:vehicle:save'">新增</el-button>
      </template>
    </CdlSearch>
    <CdlTable :template-tree="tree" :data="state.dataList" :control-width="260" :loading="loading"></CdlTable>
  </el-card>
</template>
